<template>
    <!--热门车型报价-->
    <div  class="panle carlist" :class="($store.state.appCarlist.actBrand || $store.state.appCarlist.actPrice || $store.state.appCarlist.actCarType || $store.state.appCarlist.actCountry) ?'' : 'carlist-top'">
      <div>
        <ul  class="cfix">
          <li v-for="(v,i) in pagingMsg.carInfo" >
            <a>
              <div   v-if="v.pic" class="box"  @tap="goCarDetail(v.id)">
                  <div class="pic">
                      <img  v-lazy="$store.state.appData.imgUrl+v.pic" :key="$store.state.appData.imgUrl+v.pic">
                  </div>
                  <p class="num" style="padding-left:5px;">{{v.name}}</p>
                  <!-- <span class="btn">热卖</span> -->
                  <div class="bottom cfix">
                    <p class="price" style="padding-left:5px;">
                      <span class="left"><span style="color:#ff6a27;">{{v.shareNum}}</span>人在拼单</span>
                      <span class="right"><span style="color:#ff6a27;">{{v.carNum}}</span>种车型</span>
                    </p>
                    <div style="clear:both"></div>
                    <p class="price" >
                      <span class="big_left" style="margin-left:3px">{{minGuidePrice(v)}}万起</span>
                    </p>
                  </div>
              </div>
              <div v-else class="box"  @tap="goCarDetail(v.id)">
                  <div class="pic">
                    <!-- 重新切图 -->
                      <img  v-lazy="noCarPic">
                  </div>
                  <p class="num" style="padding-left:5px;">{{v.name+"(暂无车型图片)"}}</p>
                 <!--  <span class="btn">热卖</span> -->
                  <div class="bottom cfix">
                    <p class="price" style="padding-left:5px;">
                      <span class="left"><span style="color:#ff6a27;">{{v.shareNum}}</span>人在拼单</span>
                      <span class="right"><span style="color:#ff6a27;">{{v.carNum}}</span>种车型</span>
                    </p>
                    <div style="clear:both"></div>
                    <p class="price" >
                      <span class="big_left" style="margin-left:3px">{{minGuidePrice(v)}}万起</span>
                    </p>
                  </div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
</template>

<script>
  import { getcarModelDetail } from '@/api/carDetail'
  export default {
    data() {
      return {
        noCarPic:'static/img/noCarPic.png',
        obj:{
              carSeriesId:"",
              customerId:this.$store.getters.user.id
          }
      }
    },
    props: {//也可以是对象，允许配置高级设置，如类型判断、数据校验、设置默认值
        pagingMsg: {
            type: Object
        }
    },
    watch: {},
    methods: {
        goCarDetail(carSeriesId){
          this.obj.carSeriesId=carSeriesId 
          getcarModelDetail(this.obj).then(resp => {
            this.$store.commit("GetCarDetails", resp.data) 
            this.$router.push({
                path: "/modelsOffer",
            })
          })
        },
        minGuidePrice(v) {
            let minGuidePrice = parseFloat(v.minGuidePrice)
            let maxGuidePrice = parseFloat(v.maxGuidePrice)
            if(minGuidePrice < maxGuidePrice){
                return minGuidePrice
            }
            else{
                return maxGuidePrice
            }
        }    
    },
    mounted () {
        
    },
    filters: {},
    computed: {

    },
    created() {
    }
  };
</script>

<style  scoped>
  /* 车型列表 */
  .cfix li {
    border-bottom: 1px solid#f0f0f0; 
  }
  .cfix:after {
    content: " ";
    position: absolute;
    right: -10px;
    top: -30px;
    bottom: -60px;
    width: 1px;
    border-right: #f0f0f0 1px solid;
    z-index: 50;
  }
  .carlist {
     background-color:#f5f5f5;color:#333333
   }
  .carlist ul {
    overflow:hidden;
  }
  .carlist li {
    width: 50%;
    float: left;
    height:0px;
    padding-bottom:47%;
    position: relative;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    background: #fff;
  }


  .carlist  div.box {
    position: relative;
    background-color:#fff;
    text-align: center;
    margin: 5px 8px 0px 8px;
  }
  .carlist  div.box .pic {
    overflow: hidden;
    margin:0;
    padding:0;
    background-color:#fff;
  }

  .carlist  div.box .pic img {
    width:70%;
    height:70%;
    position: relative;
  }
  
  .carlist  div.box .bottom {
    line-height:1.1rem;
    width: 100%;
    text-align: left;
    font-size: .6rem;
    color:#333333
  }
  .carlist  div.box .bottom p{
    margin:0px;font-size:0.65rem;color:#333333
  }
  .carlist  div.box .bottom p b{
    color:#ff6a27;
  }
  .num{
   text-align: left;
    margin-bottom:0px;
    color:#000000; 
    overflow: hidden;
    line-height: 0.8rem;
    height:  0.8rem;
  }
  .carlist  div.box .top {
    position: absolute;
    top: .16rem;
    left: .16rem;
    text-align: center;
  }

  .carlist  div.text {
    text-align: center;
    padding: .25rem 0 0;
    font-size: .7rem;
    position: absolute;
    top:9px;
    right: .25rem;
  }
  .price .big_left {
    color:#ff6a27;
    font-size:15px;
  }
  .price .right{
    float:right;
    font-size:11px;
    color:#999999;
  }
  .price .left{
    float:left;
    font-size:11px;
    color:#999999;
  }
  .btn{
    width:36px;
    height:18px;
    line-height:18px;
    display: inline-block;
    border:1px solid #ff6a27;
    position: absolute;
    top:5px;
    left:5px;
    color:#ff6a27;
    border-radius: 3px;
    font-size:10px;
  }
  .carlist-top {
      margin-top:86px;
      min-height:0px;
  }
</style>